<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="author" content="PIXINVENT">
  <title>666后台管理系统</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
  <script src="app-assets/js/Dream.js"></script>
</head>

<body>
  <div class="content-wrapper">
    <div class="content-header ">
      <div class="content-header-left mb-2">
        <h3 class="content-header-title mb-0">员工列表</h3>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <div class="card-body">
          <div class="searchbox">
            <form class="form-inline">
              <div class="form-group">
                <input type="text" class="form-control" id="empNameSearch" placeholder="请填写用户名称">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" id="phoneNumberSearch" placeholder="请填写手机号码">
              </div>

              <div class="form-group">
                <button class="btn btn-primary search" id="search">查询</button>
              </div>

            </form>
          </div>
          <div class="funcbtn clearfix">
            <div class="pull-left"><a class="btn btn-info" href="添加员工信息.html"> 添加员工</a></div>
          </div>
          <div class="tablebox1">
            <table class="table">
              <thead>
                <tr>
                  <th><input type="checkbox"></th>
                  <th>登录名</th>
                  <th>员工名称</th>
                  <th>职位</th>
                  <th>邮箱</th>
                  <th>电话号码</th>
                  <th>工资</th>
                  <!-- <th>创建时间</th>
                  <th>修改时间</th>
                  <th>删除时间</th> -->
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="showMessage">

              </tbody>
            </table>

            <div class="page clearfix">
              <div id="show_page_info" class="pull-left">

              </div>
              <div class="pull-right">
                <nav aria-label="..." class="pull-left">
                  <ul class="pagination" id="pagination">

                  </ul>
                </nav>
              </div>
            </div>

          </div>

          <!-- 修改的模态框 -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                  <form>
                    <div class="form-group">
                      <input type="text" placeholder="编号" id="employeeId" class="form-control" disabled />
                    </div>
                    <div class="form-group">
                      <input type="text" placeholder="员工名称" id="employeesName" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input type="text" placeholder="职位" id="position" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input type="text" placeholder="邮箱" id="email" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input type="text" placeholder="电话号码" id="phoneNumber" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input type="text" placeholder="工资" id="salary" class="form-control" />
                    </div>
                  </form>

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">修改员工密码</h4>
        </div>
        <div class="modal-body">
          <div class="form1 form2">
            <ul class="row">
              <li class="col-xs-20"><span>ID：</span>
                <input type="text" class="form-control" value="" disabled id="upd-password-id">
              </li>

              <li class="col-xs-20"><span>用户密码：</span>
                <input type="text" class="form-control" value="" id="upd-password-pwd">
              </li>
            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="updatePasswordBaoCun()">保存</button>
        </div>
      </div>
    </div>
  </div>

  <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script>
  <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>

</body>

</html>
<script>
  $(function () {
    var empName = "";
    var phoneNumber = "";
    var pageNum = 1;
    onleadOk(empName, phoneNumber, pageNum);
  })

  // 事件委托，为分页按钮绑定点击事件
  $('#pagination').on('click', 'li', function () {
    var pageNum = $(this).attr('jumpPageNum');
    onleadOk(pageNum);
  });

  // 页面加载
  function onleadOk(empName, phoneNumber, pageNum) {
    $.ajax({
      url: 'http://localhost:24080/employees/page',
      type: 'get',
      data: {
        empName: empName,
        phoneNumber: phoneNumber,
        pageNum: pageNum,
      },
      dataType: 'json',
      success: function (data) {
        console.log(data)
        if (!data.status) {
          alert(data.message);
        }
        var tbody = $('#showMessage');
        tbody.empty(); // 清空现有的表格内容

        // 分页信息
        let pageInfo = $('#show_page_info');
        pageInfo.empty();

        let span = `当前${data.data.pageNum}页,总${data.data.pages}页,总共${data.data.total}条记录`;
        pageInfo.append(span);

        // 分页列
        let pagination = $("#pagination");
        pagination.empty();

        let firstdisable = data.data.isFirstPage ? "disabled" : "";
        let enddisable = data.data.isLastPage ? "disabled" : "";

        let firstLi = `<li class ="${firstdisable}" jumpPageNum="1">
                          <a href="javascript:;"><span>首页</span></a>
                          </li>`;
        pagination.append(firstLi);

        let firstLiIcon = `<li class ="${firstdisable}" jumpPageNum="${data.data.pageNum - 1}">
                          <a href="javascript:;"><span>《</span></a>
                          </li>`;
        pagination.append(firstLiIcon);

        for (let i = 1; i <= data.data.pages; i++) {
          let active = "";
          if (data.data.pageNum == i) {
            active = "active";
          }
          let li = `<li class ="${active}" jumpPageNum="${i}">
                          <a href="javascript:;"><span>${i}</span></a>
                          </li>`;
          pagination.append(li);
        }
        let endtLi = `<li class ="${enddisable}" jumpPageNum="${data.data.pageNum + 1}">
                          <a href="javascript:;"><span>》</span></a>
                          </li>`;
        pagination.append(endtLi);

        let endLiIcon = `<li class ="${enddisable}" jumpPageNum="${data.data.pages}">
                          <a href="javascript:;"><span>末页</span></a>
                          </li>`;
        pagination.append(endLiIcon);

        // 渲染数据
        data.data.list.forEach(function (employees) {
          var row = `<tr>
                      <td><input type="checkbox"></td>
                            <td>${employees.loginName}</td>
                            <td>${employees.empName}</td>
                            <td>${employees.position}</td>
                            <td>${employees.email}</td>
                            <td>${employees.phoneNumber}</td>
                            <td>${employees.salary}</td>

                            <td>
                              <div class="setbox">
                                <p>选择操作</p>
                                <div class="setlist">
                                  <a href="#" onclick="updateEmployee(${employees.employeeId})" data-toggle="modal" data-target="#myModal">修改</a>
                                  <a href="#" onclick="updatePassword(${employees.employeeId})" data-toggle="modal" data-target="#myModal1">改密</a>
                                  <a href="#" onclick="deleteEmployee(${employees.employeeId})">删除</a>
                                </div>
                              </div>
                            </td>
                        </tr>`;
          tbody.append(row);
        });
      }
    })
  }

  // 删除功能
  function deleteEmployee(employeeId) {
    alert(employeeId)
    $.ajax({
      url: 'http://localhost:24080/employees/' + employeeId,
      type: 'Delete',
      dataType: 'json',
      success: function (data) {
        console.log(data)
        if (!data.status) {
          alert(data.message);
        }
        onleadOk("", "", 1);
      }
    })
  }

  // 修改功能
  let employees = {};
  function updateEmployee(employeeId) {
    // 获取后台数据
    $("#employeeId").val(employeeId);
    alert(employeeId);
    $.ajax({
      url: "http://localhost:24080/employees/" + employeeId,
      type: "get",
      contentType: "application/json",
      success: function (data) {
        console.log(data);
        $("#employeeId").val(data.data.employeeId);
        $("#employeesName").val(data.data.empName);
        $("#position").val(data.data.position);
        $("#email").val(data.data.email);
        $("#phoneNumber").val(data.data.phoneNumber);
        $("#salary").val(data.data.salary);
        employees = JSON.stringify(data.data);
        $("#myModal").modal("show");
      },
    });
  }
  $(document).on("click", ".olk", function () {
    console.log(employees);
    employees = JSON.parse(employees);
    employees.empName = $("#employeesName").val();
    employees.position = $("#position").val();
    employees.email = $("#email").val();
    employees.phoneNumber = $("#phoneNumber").val();
    employees.salary = $("#salary").val();
    $.ajax({
      url: "http://localhost:24080/employees",
      type: "put",
      contentType: "application/json", // 设置Content-Type
      data: JSON.stringify(employees), // 发送JSON格式的数据
      success: function (data) {
        console.log(data);
        alert("修改成功！");
        var empName = $("#empNameSearch").val();
        var phoneNumber = $("#phoneNumberSearch").val();
        onleadOk(empName, phoneNumber, 1); // 刷新列表
      },
    });
  });

  // 修改密码功能
  function updatePassword(employeeId) {
    $('#upd-password-id').val(employeeId);
    $('#myModal1').modal('show');
  }

  function updatePasswordBaoCun() {
    let employeeId = $('#upd-password-id').val();
    let password = $('#upd-password-pwd').val();
    let updatedBy = sessionStorage.getItem("loginName");

    $.ajax({
      url: 'http://localhost:24080/employees',
      type: 'put',
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify({ employeeId, password, updatedBy }),
      success: updatePasswordSuccess
    });
  }

  function updatePasswordSuccess(data) {
    if (data.code == 200) {
      Dreamer.success('修改成功', 1000);
      $('#myModal1').modal('hide');
      $('#upd-password-pwd').val('');
      onleadOk('', '', 1); // 刷新列表
    } else {
      Dreamer.error('修改失败', 1000);
    }
  }

  // 查的功能
  $("#search").on('click', function () {
    event.preventDefault();
    var empName = $("#empNameSearch").val();
    var phoneNumber = $("#phoneNumberSearch").val();
    onleadOk(empName, phoneNumber, 1);
  });

  // 点击页码，局部刷新
  $(document).on("click", "#pagination li", function () {
    var empName = $("#empNameSearch").val();
    var phoneNumber = $("#phoneNumberSearch").val();
    onleadOk(empName, phoneNumber, $(this).attr("jumpPageNum"));
  });

  // 确保模态框关闭后清空输入框
  $('#myModal1').on('hidden.bs.modal', function () {
    $('#upd-password-pwd').val('');
  });
</script>